<template>
  <view class="container">
    <!-- 步骤指示器 -->
    <view class="step-indicator">
      <view class="step" :class="{ 'active': currentStep === 1 }" @click="currentStep = 1">
        <text class="step-number">1</text>
        <text class="step-text">拍照上传</text>
      </view>
      <view class="step-line"></view>
      <view class="step" :class="{ 'active': currentStep === 2 }" @click="currentStep = 2">
        <text class="step-number">2</text>
        <text class="step-text">信息填写</text>
      </view>
    </view>

    <!-- 步骤1：拍照上传 -->
    <view v-if="currentStep === 1" class="upload-step">
      <view class="upload-container">
        <!-- 正面照片 -->
        <view class="upload-box">
          <view class="upload-title">药品正面照片</view>
          <view class="image-uploader" @click="handleUpload('front')" v-if="!formData.frontImage">
            <text class="iconfont icon-camera"></text>
            <text class="upload-text">点击拍照</text>
          </view>
          <view class="preview-wrapper" v-else>
            <image :src="formData.frontImage" mode="aspectFill" class="preview-image" />
            <view class="preview-actions">
              <text class="action-btn" @click="handleUpload('front')">重新拍照</text>
              <text class="action-btn delete" @click="deleteImage('front')">删除</text>
            </view>
          </view>
        </view>

        <!-- 背面照片 -->
        <view class="upload-box">
          <view class="upload-title">药品背面照片</view>
          <view class="image-uploader" @click="handleUpload('back')" v-if="!formData.backImage">
            <text class="iconfont icon-camera"></text>
            <text class="upload-text">点击拍照</text>
          </view>
          <view class="preview-wrapper" v-else>
            <image :src="formData.backImage" mode="aspectFill" class="preview-image" />
            <view class="preview-actions">
              <text class="action-btn" @click="handleUpload('back')">重新拍照</text>
              <text class="action-btn delete" @click="deleteImage('back')">删除</text>
            </view>
          </view>
        </view>
      </view>

      <button class="next-btn" @click="nextStep" :disabled="!formData.frontImage">下一步</button>
    </view>

    <!-- 步骤2：信息填写 -->
    <view v-else class="form-step">
      <scroll-view scroll-y class="form-container">
        <view class="form-group">
          <text class="label">药品名称<text class="required">*</text></text>
          <input
            v-model="formData.name"
            class="input"
            placeholder="请输入药品名称"
            placeholder-class="placeholder"
          />
        </view>

        <view class="form-group">
          <text class="label">药效</text>
          <textarea
            v-model="formData.efficacy"
            class="textarea"
            placeholder="请输入药品功效"
            placeholder-class="placeholder"
          />
        </view>

        <view class="form-group">
          <text class="label">适应症状</text>
          <textarea
            v-model="formData.symptoms"
            class="textarea"
            placeholder="请输入适应症状"
            placeholder-class="placeholder"
          />
        </view>

        <view class="form-group">
          <text class="label">用法用量</text>
          <view class="dosage-inputs">
            <picker
              v-model="formData.dosage.period"
              :range="periodOptions"
              class="period-picker"
              @change="(e) => formData.dosage.period = periodOptions[e.detail.value]"
            >
              <view class="picker-text" :class="{ 'has-value': formData.dosage.period }">
                {{ formData.dosage.period || '请选择服用周期' }}
              </view>
            </picker>
            <input
              v-model="formData.dosage.amount"
              type="number"
              class="amount-input"
              placeholder="用量"
              placeholder-class="placeholder"
            />
          </view>
        </view>

        <view class="form-group">
          <text class="label">分类</text>
          <picker
            v-model="formData.category.id"
            :range="categories"
            range-key="name"
            class="category-picker"
            @change="(e) => {
              const selected = categories[e.detail.value];
              formData.category.id = selected.id;
              formData.category.name = selected.name;
            }"
          >
            <view class="picker-text" :class="{ 'has-value': formData.category.name }">
              {{ formData.category?.name || '请选择药品分类' }}
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="label">生产日期</text>
          <picker
            mode="date"
            v-model="formData.productionDate"
            class="date-picker"
          >
            <view class="picker-text">
              {{ formData.productionDate || '请选择生产日期' }}
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="label">有效期至</text>
          <picker
            mode="date"
            v-model="formData.expiryDate"
            class="date-picker"
          >
            <view class="picker-text">
              {{ formData.expiryDate || '请选择有效期' }}
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="label">备注说明</text>
          <textarea
            v-model="formData.description"
            class="textarea"
            placeholder="请输入备注说明"
            placeholder-class="placeholder"
          />
        </view>
      </scroll-view>

      <view class="button-group">
        <button class="save-btn" @click="handleSubmit" :disabled="!formData.name">保存</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { Medicine, MedicineCategory, DosagePeriod } from '@/types'

// 当前步骤
const currentStep = ref(1)

// 表单数据
const formData = reactive<Partial<Medicine>>({ 
  dosage: {
    period: '',
    amount: 0
  },
  category: {
    id: 0,
    name: ''
  }
})

// 周期选项
const periodOptions = ['每天', '每周', '每月']

// 分类数据
const categories = ref<MedicineCategory[]>([
  { id: 1, name: '感冒药' },
  { id: 2, name: '维生素' },
  { id: 3, name: '消化药' },
  { id: 4, name: '止痛药' }
])

// 处理图片上传
const handleUpload = (type: 'front' | 'back') => {
  uni.chooseImage({
    count: 1,
    sourceType: ['camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      if (type === 'front') {
        formData.frontImage = tempFilePath
      } else {
        formData.backImage = tempFilePath
      }
      // TODO: 调用OCR识别接口，自动填充表单
    }
  })
}

// 删除图片
const deleteImage = (type: 'front' | 'back') => {
  if (type === 'front') {
    formData.frontImage = ''
  } else {
    formData.backImage = ''
  }
}

// 下一步
const nextStep = () => {
  currentStep.value = 2
}

// 上一步
const prevStep = () => {
  currentStep.value = 1
}

// 提交表单
const handleSubmit = () => {
  if (!formData.name) {
    uni.showToast({
      title: '请输入药品名称',
      icon: 'none'
    })
    return
  }

  // TODO: 调用接口保存数据
  console.log('提交的表单数据：', formData)
  
  uni.showToast({
    title: '保存成功',
    icon: 'success',
    success: () => {
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/medicine/list'
        })
      }, 1500)
    }
  })
}
</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: calc(40rpx + var(--status-bar-height)) 30rpx calc(40rpx + var(--window-bottom)) 30rpx;
}

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60rpx;

  .step {
    display: flex;
    flex-direction: column;
    align-items: center;

    .step-number {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      background: #e8e8e8;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      margin-bottom: 12rpx;
    }

    .step-text {
      font-size: 28rpx;
      color: #999999;
    }

    &.active {
      .step-number {
        background: #018d71;
        color: #ffffff;
      }

      .step-text {
        color: #018d71;
      }
    }
  }

  .step-line {
    width: 120rpx;
    height: 2rpx;
    background: #e8e8e8;
    margin: 0 40rpx;
    margin-bottom: 40rpx;
  }
}

.upload-step {
  .upload-container {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 40rpx;
  }

  .upload-box {
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .upload-title {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }
  }

  .image-uploader {
    height: 360rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon-camera {
      font-size: 48rpx;
      color: #999999;
      margin-bottom: 12rpx;
    }

    .upload-text {
      font-size: 28rpx;
      color: #999999;
    }
  }

  .preview-wrapper {
    position: relative;

    .preview-image {
      width: 100%;
      height: 360rpx;
      border-radius: 8rpx;
    }

    .preview-actions {
      position: absolute;
      bottom: 20rpx;
      right: 20rpx;
      display: flex;
      gap: 20rpx;

      .action-btn {
        padding: 8rpx 24rpx;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 32rpx;
        color: #ffffff;
        font-size: 24rpx;

        &.delete {
          background: rgba(245, 34, 45, 0.6);
        }
      }
    }
  }
}

.form-step {
  height: calc(100vh - 200rpx);
  display: flex;
  flex-direction: column;

  .form-container {
    flex: 1;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    padding-bottom: 120rpx;
    margin-bottom: 40rpx;
  }
bu
  .button-group {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 100rpx;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
}
.form-group {
  margin-bottom: 20rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 8rpx;
    
    .required {
      color: #f5222d;
      margin-left: 4rpx;
    }
  }
  
  .input {
    width: 100%;
    height: 80rpx;
    background: #f8f8f8;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    max-width: 600rpx;
  }
  
  .textarea {
    width: 100%;
    height: 160rpx;
    background: #f8f8f8;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
    max-width: 600rpx;
  }
  
  .dosage-inputs {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    max-width: 600rpx;
    
    .period-picker {
      width: 100%;
      height: 80rpx;
      background: #f8f8f8;
      border-radius: 8rpx;
      
      .picker-text {
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        color: #999999;
        
        &.has-value {
          color: #333333;
        }
      }
    }
  }
}
.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.save-btn {
  height: 88rpx;
  background: #018d71;
  border-radius: 44rpx;
  color: #ffffff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.picker-text {
  &.has-value {
    color: #333333;
  }

  &:not(.has-value) {
    color: #999999;
  }
}
</style>